<template>
  <div class="user">
    <PageSearch
      :pageSearchConfig="pageSearchConfig"
      @reset="handleReset"
      @search="handleSearch"
    ></PageSearch>
    <PageContent
      class="pageContent"
      :pageContentConfig="pageContentConfig"
      ref="pageContentRef"
      @createData="changeDialogVisible"
      @edit="handleEdit"
    ></PageContent>
    <PageModal
      ref="pageModalRef"
      :pageModalConfig="transformPageModalConfig"
      :defaultInfo="defaultInfo"
    ></PageModal>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import useMainStore from "../../../../stores/main/main";
import PageSearch from "@/components/page-search";
import PageContent from "@/components/page-content";
import PageModal from "@/components/page-modal";
import { pageSearchConfig } from "./config/search";
import { pageContentConfig } from "./config/content";
import { pageModalConfig } from "./config/modal";
import { usePageSearch } from "@/hooks/usePageSearch";
import { usePageModal } from "@/hooks/usePageModal";

//为什么放在这里来呢因为是搜索部分调用了content部分的方法
const [pageContentRef, handleReset, handleSearch] = usePageSearch();
// const pageContentRef = ref();
// const handleReset = () => {
//   pageContentRef.value.getPageData();
// };
// const handleSearch = (e) => {
//   pageContentRef.value.getPageData({ ...e });
// };

// const defaultInfo = ref({});
// const pageModalRef = ref();
// const changeDialogVisible = () => {
//   pageModalRef.value.dialogVisible = true;
//   defaultInfo.value = {};
// };
// const handleEdit = (obj) => {
//   pageModalRef.value.dialogVisible = true;
//   defaultInfo.value = obj;
// };

// 改造一下modal里面的部门和角色数据
const MainStore = useMainStore();
const transformPageModalConfig = computed(() => {
  const categoryObj: any = pageModalConfig.formItems.find(
    (item) => item.fileId === "categoryId"
  );
  categoryObj.options = MainStore.categoryData.map((item: any) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
  const roleObj: any = pageModalConfig.formItems.find(
    (item) => item.fileId === "roleId"
  );
  roleObj.options = MainStore.roleData.map((item: any) => {
    return {
      label: item.name,
      value: item.id,
    };
  });

  return pageModalConfig;
});

const newHandleCallback = () => {
  const passwordItem = transformPageModalConfig.value.formItems?.find(
    (item: any) => item.fileId === "password"
  );
  passwordItem!.isHidden = false;
  console.log(transformPageModalConfig.value);
};
const editHandleCallback = () => {
  const passwordItem = transformPageModalConfig.value.formItems?.find(
    (item: any) => item.fileId === "password"
  );
  passwordItem!.isHidden = true;
  console.log(transformPageModalConfig.value);
};

// 新增数据的弹窗的显示,编辑数据的弹窗显示
const [pageModalRef, defaultInfo, changeDialogVisible, handleEdit] =
  usePageModal(newHandleCallback, editHandleCallback);
</script>

<style lang="less" scoped>
.user {
  .table {
    margin-top: 20px;
  }
  .pageContent {
    margin-top: 50px;
  }
}
</style>
